<script setup lang="ts">
import { bindKeydown } from '@/utils/functions'
import { computed, onMounted } from 'vue'

// 定义接收的 props
const props = defineProps({
  conditions: {
    type: Object,
    required: true
  },
  showSearchBar: {
    type: Boolean,
    default: true
  },
  isConfirmButtonLoading: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits(['query-event'])
// 创建响应式数据
const localSearchConditions = computed(() => props.conditions)

// 创建按键监听
bindKeydown('Enter', () => {
  handleConditionsQuery()
})

onMounted(() => {
  // 将 props 的值复制给本地数据
  handleGetQueryConditions()
})

const handleGetQueryConditions = () => {
  // 在这里获取查询条件
}

const handleConditionsQuery = () => {
  // 把查询参数传递回去
  emits('query-event', localSearchConditions.value)
}

const handleResetQueryConditions = () => {
  const _local = localSearchConditions.value
  for (let key in _local) {
    _local[key].value = ''
  }
}
</script>

<template>
  <transition name="el-fade-in-linear">
    <el-form :inline="true" v-show="showSearchBar">
      <el-form-item
        v-for="condition in localSearchConditions"
        :key="condition.dictName"
        :label="condition.dictName"
      >
        <el-input
          v-if="condition.type === 'input'"
          v-model="condition.value"
          :placeholder="'请输入' + condition.dictName"
        />
        <el-select v-else v-model="condition.value" :placeholder="'请选择' + condition.dictName">
          <el-option
            v-for="option in condition.children"
            :key="option.id"
            :label="option.dictName"
            :value="option.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="search"
          type="primary"
          @click="handleConditionsQuery"
          :loading="isConfirmButtonLoading"
          >{{ isConfirmButtonLoading ? '加载中' : '查询' }}</el-button
        >
        <el-button plain icon="refresh" @click="handleResetQueryConditions">重置</el-button>
      </el-form-item>
    </el-form>
  </transition>
</template>

<style scoped lang="less">
.el-form {
  display: inline-flex;
}

:deep(.el-form-item__content) {
  flex-wrap: nowrap;
}
</style>
